<template>
	<view class="container">
		<view class="tab-list">
			<view class="list-item" v-for="(item,index) in tabList" :key="index" @click="tabListClick(index)" :style="currentTab==index?'color:#2A83FF;':''">
				{{item}}
			</view>
			<view class="tab-icon" :style="left"></view>
		</view>  

		<view class="content">
			<swiper :current="currentTab" :style="swiperHinget" @change="bindChange">
				<swiper-item class="swiper-item">
					<view>
						<view>
							<view class="title">个人任务</view>
							<view v-if="today" class="desc">总任务：{{today.obj0.allTaskNumber}}个 ，
								已完成：{{today.obj0.achieveTaskNumber}}个 ，未完成：{{today.obj0.notAchieveTaskNumber}}个</view>
							<view class="chart">
								<view class="loading" v-if="loading">
									<loading></loading>
								</view>
								<mpvue-echarts :echarts="echarts" :onInit="todayPersonal"  canvasId="todayPersonal"></mpvue-echarts>
							</view>
						</view>
						<view>
							<view class="title">公司任务</view>
							<view v-if="today" class="desc">总任务：{{today.obj1.allTaskNumber}}个 ，
								已完成：{{today.obj1.achieveTaskNumber}}个 ，未完成：{{today.obj1.notAchieveTaskNumber}}个</view>
							<view class="chart">
								<view class="loading" v-if="loading">
									<loading></loading>
								</view>
								<mpvue-echarts :echarts="echarts" :onInit="todayCompany"  canvasId="todayCompany"></mpvue-echarts>
							</view>
						</view>
					</view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<view>
						<picker class="time-title" mode="selector" :range="textList" @change="textChange">当前显示：{{textValue}}</picker>
						<view>
							<view class="title">个人</view>
							<view class="chart">
								<mpvue-echarts :echarts="echarts" :onInit="historyPersonal" canvasId="historyPersonal"></mpvue-echarts>
							</view>
						</view>
						<view>
							<view class="title">公司</view>
							<view class="chart">
								<mpvue-echarts :echarts="echarts" :onInit="historyCompany" canvasId="historyCompany"></mpvue-echarts>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottom-bow"></view>
	</view>
</template>

<script>
	import loading from '../../../components/loading/loading.vue'
	import { reportModule } from '../../../modules/report.js';
	import * as echarts from 'echarts'
	import mpvueEcharts from 'mpvue-echarts'
	import Eoption from '../../../modules/echart-data.js';

	const report = new reportModule()
	
	let TodayPersonal = null; // 创建今日个人图表对象
	function onTodayPersonal (canvas, width, height) {
	  TodayPersonal = echarts.init(canvas, null, {
	    width: width,
	    height: height
	  });
	  canvas.setChart(TodayPersonal);
	  return TodayPersonal; 
	}
	
	let TodayCompany = null; // 创建今日公司图表对象
	function onTodayCompany (canvas, width, height) {
	TodayCompany = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(TodayCompany);
	return TodayCompany; 
	}
	
	let HistoryPersonal = null;  // 创建历史个人图表对象
	function onHistoryPersonal (canvas, width, height) {
	HistoryPersonal = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(HistoryPersonal);
	return HistoryPersonal; 
	}
	
	let HistoryCompany = null;  // 创建历史公司图表对象
	function onHistoryCompany (canvas, width, height) {
	HistoryCompany = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(HistoryCompany);
	return HistoryCompany; // 返回 chart 后可以自动绑定触摸操作
	}
	
	export default {
		components: {
			mpvueEcharts,
			loading
		},
		data() {
			return {
				loading: true,
				// tab切换
				currentTab: 0,
				left: 'left:16%;',
				tabList: [
					'今日',
					'历史',
				],
				textList: [
					'每周', '每月', '每年'
				],
				textValue: '每周',
				swiperHinget: '',
				today: null,
				history: [],
				echarts,
				todayPersonal:onTodayPersonal,
				todayCompany: onTodayCompany,
				historyPersonal: onHistoryPersonal,
				historyCompany: onHistoryCompany
			}
		},
		watch: {
			currentTab: function(val) {
				this.left = val == 0 ? 'left:15%' : 'left:66%'
			}
		},
		onLoad() {
			let that = this;
			setTimeout(()=>{
				this.getReport()
			},1000)
			
			uni.getSystemInfo({
				success(res) {
					that.swiperHinget = `height:${res.windowHeight - 40}px`
				}
			})
		},
		onShow() { // 监听页面显示
			this.getReport() //调用首次加载数据
		},
		onPullDownRefresh() {
			this.textValue = '每周'
			this.getReport() 
		},
		methods: {
			getReport() { // 获取图表数据
			console.log('1231')
				const todayRepoert = report.getTodayReport()
				const historyReport = report.getHistoryReport(1)
				Promise.all([todayRepoert, historyReport])
					.then((res) => {
						uni.stopPullDownRefresh()
						this.today =  this._listOrObject(res[0]) // 赋值
						this.drawToday(res[0])
						this.drawHistory(res[1],1)
						this.loading = false
					})
			}, 
			
			textChange(e){ // 筛选时间，获取历史报表
				this.textValue = this.textList[e.detail.value] 
				let num = parseInt(e.detail.value) + 1
				const historyReport = report.getHistoryReport(num)
				historyReport.then((res)=>{
					this.drawHistory(res,num)
				})
			},
			
			drawToday(data) { // 绘制今日的图表数据
				
				TodayPersonal.setOption(Eoption.drawRound(data[0].achieveTaskPercentage,data[0].notAchieveTaskPercentage))
				TodayCompany.setOption(Eoption.drawRound(data[1].achieveTaskPercentage),data[1].notAchieveTaskPercentage)
			},
			
			drawHistory(data,type) { // 绘制历史的图表数据
				HistoryPersonal.setOption(Eoption.listForEach(data.personList,type))
				HistoryCompany.setOption(Eoption.listForEach(data.corporationList,type))
			},
			
			tabListClick(index) { // 点击切换选项卡
				this.currentTab = index
			},

			bindChange(e) { // 滑动切换选项卡
				this.currentTab = e.detail.current
			},
			
			_listOrObject(list) { // 数据 转 对象
				let data = {};
				for (var key in list) {
					data[`obj${key}`] = list[key]
				}
				return data
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/scss/common.scss";

	@import "index.scss";
</style>
